<!--装货员总单信息-->
<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">装货员端</el-breadcrumb-item>
    <el-breadcrumb-item>打印标签</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="order_list" v-for="item in warList" :key="item.oid">
    <div class="order_title">
      <p>订单</p>
    </div>

    <div class="order_main">
      <div class="order_user">
        <h1>收货人信息</h1>
        <table>
          <tr>
            <td>订单编号：</td>
            <td>{{item.single}}</td>
          </tr>
          <tr>
            <td>收货人：</td>
            <td>{{item.userName}}</td>
          </tr>
          <tr>
            <td>收货手机：</td>
            <td>{{item.telephone}}</td>
          </tr>
          <tr>
            <td>收货地址：</td>
            <td>{{item.address}}</td>
          </tr>
        </table>
      </div>
      <div class="order_goods">
        <h1>商品信息</h1>
        <el-scrollbar>
          <table>
            <tr v-for="i in item.detailedEntities" :key="i.id">
              <td>{{i.dishesName}}</td>
              <td>x{{i.purchaseQuantity}}</td>
            </tr>
          </table>
        </el-scrollbar>
      </div>
    </div>
    <el-button @click="printOrder(item)">打印订单</el-button>
  </div>
  <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, next"
      :total="total"
      :current-page="queryInfo.currentPage"
      :page-size="queryInfo.pageSize"
      class="pagination-container"
      ref="pagRef"
  />
</template>

<script setup>
import {reactive, ref, getCurrentInstance, onMounted} from "vue";

  // 渲染
  const {proxy} = getCurrentInstance()
  const total = ref(0)
  const queryInfo = reactive({
    status: '已装配',
    currentPage: 1,
    pageSize: 1
  })
  // 装配完成的订单
  const warList = reactive([])
  // 渲染
  onMounted(() => {
    getBuyOrder()
  })
  // 获取所有status为已截单的订单
  const getBuyOrder = async () => {
    const {data: res} = await proxy.$http.WarehouseService.getOrder(queryInfo)
    if (res.code !== 200) return proxy.$message.error('获取已下单订单数据失败')
    warList.length = 0
    for (let i= 0; i< res.data.records.length; i++) {
      warList.push(res.data.records[i])
    }
    total.value = res.data.total
  }

  // 根据分页器切换每页的菜品
  const handleCurrentChange = val => {
    queryInfo.currentPage = val
    getBuyOrder()
  }
  const printOrder=async (id)=>{
	   console.log(id);
	  const queryIn={
		  "pageSize":10,
		  "currentPage":1,
	  }
	  const {data: res} = await proxy.$http.WarehouseService.printOrderDetail({oid:id.id})
	  if (res.code !== 200) return proxy.$message.error('获取已下单订单数据失败')
	  window.open(res.data)
  }
</script>

<style scoped lang="scss">
  .date_search {
    display: flex;
    justify-content: right;
  }

  .el-button {
    font-size: 0.15rem;
    font-weight: bolder;
    background-color: rgb(57,62,74);
    height: 50px;
    color: white;
    bottom: 2%;
    position: absolute;
    width: 8%;
  }
  .el-button:nth-child(3) {
    right: 10%;
  }
  .el-button:nth-child(4) {
    right: 0;
  }
  .el-button:hover {
    background-color: white;
    color: rgb(57,62,74);
  }

  .order_list {
    margin-top: 30px;
    height: 80%;
    .el-button{
      right: 32.5%;
      width: 10%;
    }
    .order_title {
      background-color: rgb(57,62,74);
      font-size: 0.6rem;
      height: 15%;
      p {
        height: 50%;
        transform: translateY(50%);
        color: white;
      }
    }
    .order_main {
      background-color: rgb(57,62,74);
      height: 50%;
      border-top: 5px rgb(221,221,221) solid;
      display: flex;
      justify-content: space-around;
      .order_user {
        height: 140%;
        width: 40%;
        background-color: white;
        box-sizing: border-box;
        border-radius: 0.1rem;
        margin-top: 10%;
        box-shadow: 5px 5px 5px #888888;
        padding: 2%;
        table {
          width: 100%;
          tr {
            height: 40px;
            width: 100%;
            td {
              font-size: 0.18rem;
              text-align: left;
              min-width: 50%;
            }
          }
        }
        h1{
          font-size: 0.4rem;
          height: 20%;
        }
      }
      .order_goods {
        height: 140%;
        width: 30%;
        background-color: white;
        box-sizing: border-box;
        border-radius: 0.1rem;
        margin-top: 10%;
        box-shadow: 5px 5px 5px #888888;
        padding: 2% 3%;
        h1{
          font-size: 0.4rem;
          height: 20%;
        }
        table{
          width: 100%;
          tr {
            height: 40px;
            td {
              font-size: 0.18rem;
              text-align: left;
            }
            td:nth-child(1) {
              width: 90%;
            }
          }
        }
        .el-scrollbar {
          height: 80%;
          background-color: white;
        }
      }
    }
  }

  .el-pagination{
    position: absolute;
    right: 8%;
    bottom: 2%
  }
</style>
